<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Wangrui">
    <title></title>
    <style>
        .outer{
            width: 200px;
            margin: 0 auto;
            background-color: black;
            text-align: center;
            color: white;
            padding: 10px;
        }
        span{
            display: inline-block;
            padding: 0 10px;
            margin: 10px;
            border: 2px solid #999;
            /*color: black;*/
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p><span>00</span>分<span>10</span>秒</p>
        <input type="button" value="开始倒计时">
    </div>
</body>
</html>
<script>
    var btn = document.querySelector('input');
    // 判断倒计时是否开始
    var isStart = false;
    // 保存当前开启的定时器
    var timer = null;

    btn.onclick = function(){
        if(isStart == false){
            // 还没有开始倒计时，点击按钮开始倒计时，并把按钮改为暂停
            btn.value = '暂停倒计时';
            // 每隔一秒钟更新一次时间
            timer = setInterval(formatDate,1000);
        }else{
            // 已经开始倒计时，点击按钮暂停倒计时，并把按钮改为开始
            btn.value = '开始倒计时';
            clearInterval(timer);
        }
        isStart = !isStart;
    }
    // 封装一个方法，处理时间
    function formatDate(){
        var spans = document.querySelectorAll('span');
        // 把倒计时的时间转化成秒数
        var aTimes = spans[0].innerHTML*60 + spans[1].innerHTML*1;

        if(aTimes == 1){
            btn.value = '倒计时结束';
        }
        // 当时间为0时，停止倒计时，并结束函数
        if(aTimes == 0){
            clearInterval(timer);
            return;
        }
        // 每次减少一秒钟
        aTimes --;
        // 再把剩余的时间转化成 分钟数 和 秒数
        // var m = Math.floor(aTimes/60);
        // 解析成整数
        var m = parseInt(aTimes/60);
        var s = aTimes%60;

        // 再把分钟数和秒数显示到页面上
        spans[0].innerHTML = m<10 ? '0'+m : m;
        spans[1].innerHTML = s<10 ? '0'+s : s;
    }


</script>